<template>
  <div class="statisticsFire">
    <div class="statistics-left" :class="this.leftFold ? 'leftFold' : 'unLeftFold'">
      <div class="statistics-box">
        <div class="statistics-bg"></div>
        <div class="statistics-title">部署传感器数量</div>
        <div class="statistics-numBg1"></div>
        <div class="statistics-numBox">
          <div class="statistics-numLable">传感器总数</div>
          <div class="statistics-num">{{ data && data.sensorTotal }}</div>
        </div>
      </div>

      <div class="statistics-box" style="margin-top: 120px">
        <div class="statistics-bg"></div>
        <div class="statistics-title">报警次数</div>
        <div class="chartBoard">
          <div ref="leftChart" :style="Style"></div>
        </div>
      </div>
    </div>
    <div class="statistics-right" :class="this.rightFold ? 'rightFold' : 'unRightFold'">
      <div class="statistics-box">
        <div class="statistics-bg right"></div>
        <div class="statistics-title">火区类型统计</div>
        <div class="statistics-numBg2"></div>
        <div class="statistics-numBox2">
          <div class="statistics-numBox">
            <div class="statistics-numLable">正常</div>
            <div class="statistics-num">
              {{ data && data.normalSensorTotal }}
            </div>
          </div>
          <div class="statistics-numBox">
            <div class="statistics-numLable" style="margin-left: -24px">
              报警
            </div>
            <div class="statistics-num" style="color: #ff444e">
              {{ data && data.alarmSensorTotal }}
            </div>
          </div>
        </div>
      </div>
      <div class="statistics-box" style="margin-top: 120px">
        <div class="statistics-bg"></div>
        <div class="statistics-title">处理情况</div>
        <div class="chartBoard">
          <div ref="rightChart" :style="Style2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sensorStatistics } from "@/api/data/home";

export default {
  name: "StatisticsSenor",
  data() {
    return {
      leftFold: false,
      rightFold: false,
      Style: {
        width: "320px",
        height: "200px",
        position: "relative",
        left: "185px",
        top: "73px",
      },
      Style2: {
        width: "320px",
        height: "200px",
        position: "relative",
        left: "23px",
        top: "-19px",
      },
      data: {
        sensorTotal: 233,
        normalSensorTotal: 230,
        alarmSensorTotal: 3,
        alarmYear: [],
        alarmTotal: [],
        disposeTotal: [],
        disposeYear: [],
      },
    };
  },
  methods: {
    async getData() {
      // this.coalDataList = [];
      const data = await sensorStatistics();
      this.data = data;
      if (data) {
        this.drawLeftLine();
        this.drawRightLine();
      }
    },
    drawLeftLine() {
      // 基于准备好的dom，初始化echarts实例
      this.leftChart = this.$echarts.init(this.$refs.leftChart);
      // 绘制图表
      let option = {
        color: ["rgba(46,171,254,0.5)"],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}年：{c} ",
          extraCssText:
            "width:100px;height:50px;background:rgba(12,78,125,0.7);",
        },
        grid: {
          top: 25,
          bottom: 30,
          // left: 5,
        },
        xAxis: {
          show: true, //---是否显示
          position: "bottom", //---y轴位置
          data: this.data.alarmYear,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              opacity: 0.2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12,
              fontWeight: "bolder",
              fontFamily: "Microsoft YaHei",
            },
            formatter(params) {
              const label = params.substring(0, 6);
              return params.length > 6 ? label + "..." : label;
            },
          },
        },

        yAxis: {
          show: true, //---是否显示
          position: "left", //---x轴位置
          axisTick: {
            show: true,
            inside: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ffffff",
              opacity: 0.3,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ffffff",
              opacity: 0.2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12,
              // fontWeight: '400',
              fontFamily: "Microsoft YaHei",
              opacity: 0.9,
            },
          },
        },

        series: [
          {
            name: "报警次数",
            type: "bar",
            symbol: "triangle",
            itemStyle: {
              color: {
                colorStops: [
                  //柱子的渐变色
                  {
                    offset: 0,
                    color: "rgba(46,171,254,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(46,171,254,1)", // 100% 处的颜色
                  },
                ],
                global: false,
              },
            },
            emphasis: {
              // 鼠标悬浮时的高亮样式
              itemStyle: {
                color: "rgba(46,171,254,1)",
              },
            },

            barMaxWidth: 24,
            barMinWidth: 5,
            nameGap: 5,
            data: this.data.alarmTotal,
          },
        ],
      };
      this.leftChart.setOption(option);
    },
    drawRightLine() {
      // 基于准备好的dom，初始化echarts实例
      this.rightChart = this.$echarts.init(this.$refs.rightChart);
      // 绘制图表
      let option = {
        color: ["rgba(46,171,254,0.5)"],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}年：{c} ",
          extraCssText:
            "width:100px;height:50px;background:rgba(12,78,125,0.7);",
        },
        grid: {
          top: 25,
          bottom: 30,
          // left: 5,
        },
        xAxis: {
          show: true, //---是否显示
          position: "bottom", //---y轴位置
          data: this.data.disposeYear,
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#ffffff",
              opacity: 0.2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12,
              fontWeight: "bolder",
              fontFamily: "Microsoft YaHei",
            },
            formatter(params) {
              const label = params.substring(0, 6);
              return params.length > 6 ? label + "..." : label;
            },
          },
        },

        yAxis: {
          show: true, //---是否显示
          position: "left", //---x轴位置
          axisTick: {
            show: true,
            inside: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ffffff",
              opacity: 0.3,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ffffff",
              opacity: 0.2,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff",
              fontSize: 12,
              // fontWeight: '400',
              fontFamily: "Microsoft YaHei",
              opacity: 0.9,
            },
          },
        },

        series: [
          {
            name: "报警次数",
            type: "bar",
            symbol: "triangle",
            itemStyle: {
              color: {
                colorStops: [
                  //柱子的渐变色
                  {
                    offset: 0,
                    color: "rgba(46,171,254,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(46,171,254,1)", // 100% 处的颜色
                  },
                ],
                global: false,
              },
            },
            emphasis: {
              // 鼠标悬浮时的高亮样式
              itemStyle: {
                color: "rgba(46,171,254,1)",
              },
            },

            barMaxWidth: 24,
            barMinWidth: 5,
            nameGap: 5,
            data: this.data.disposeTotal,
          },
        ],
      };
      this.rightChart.setOption(option);
    },
  },
  beforeDestroy() {
    if (this.leftChart) {
      this.leftChart.dispose();
      this.$echarts.dispose(this.leftChart)
      this.leftChart = null;
    }
    if (this.rightChart) {
      this.rightChart.dispose();
      this.$echarts.dispose(this.rightChart)
      this.rightChart = null;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
};
</script>

<style lang="scss" scoped>
.statistics-enter-active,
.statistics-leave-active {
  .statistics-left {
    left: -410px !important;
    opacity: 0 !important;
  }

  .statistics-right {
    right: -410px !important;
    opacity: 0 !important;
  }
}

.router-enter-active,
.router-leave-active {
  .statistics-left {
    left: -410px !important;
    opacity: 0 !important;
  }

  .statistics-right {
    right: -410px !important;
    opacity: 0 !important;
  }
}

.statisticsFire {
  .statistics-left {
    transition: all 0.3s linear;
    opacity: 1;
    position: absolute;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    left: 0px;
    width: 380px;
    height: 554px;

    // border: 1px solid #fff;
    top: 215px;
    margin-left: 29px;

    .statistics-box {
      width: 380px;
      height: 210px;
      // border: 1px solid #ccc;

      .statistics-bg {
        position: relative;
        top: -14px;
        width: 380px;
        height: 41px;
        background: url("../../../../assets/img/Home/抬头组件.png") no-repeat;
      }

      .statistics-numBg1 {
        position: relative;
        top: -8px;
        left: 40px;
        width: 318px;
        height: 158px;
        background: url("../../../../assets/img/Home/1无线条图标.png") no-repeat;
      }

      .statistics-numBox {
        display: flex;
        justify-content: center;

        align-items: center;
        position: absolute;
        top: 119px;
        left: 230px;
        flex-direction: column;

        .statistics-numLable {
          font-family: "AlibabaPuHuiTi-2-55-Regular";
          font-size: 16px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #f6f9fe;
        }

        .statistics-num {
          font-family: "AlibabaPuHuiTi-2-105-Heavy";
          font-size: 26px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #3ae184;
        }
      }

      .statistics-title {
        position: relative;
        width: 310px;
        height: 31px;
        top: -50px;
        left: 47px;
        font-family: "AlibabaPuHuiTi-2-105-Heavy";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #f6f9fe;
        // box-shadow: 0px 2px 8px 0px rgba(5, 28, 55, 0.42);
      }

      .chartBoard {
        color: white;
        justify-content: center;
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        font-size: 20px;
      }
    }
  }

  .statistics-right {
    transition: all 0.3s linear;
    opacity: 1;
    position: absolute;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    right: 0px;
    width: 380px;
    height: 554px;

    // border: 1px solid #fff;
    top: 215px;

    margin-right: 29px;

    .statistics-box {
      width: 380px;
      height: 210px;

      // border: 1px solid #ccc;
      .statistics-bg {
        position: relative;
        top: -14px;
        width: 380px;
        height: 41px;
        background: url("../../../../assets/img/Home/抬头组件.png") no-repeat;
      }

      .statistics-title {
        position: relative;
        width: 310px;
        height: 31px;
        top: -50px;
        left: 47px;
        font-family: "AlibabaPuHuiTi-2-105-Heavy";
        font-size: 20px;
        font-weight: normal;
        font-style: italic;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #f6f9fe;
      }

      .statistics-numBg2 {
        position: relative;
        top: -8px;
        left: 42px;
        width: 318px;
        height: 158px;
        background: url("../../../../assets/img/Home/1有线条图标.png") no-repeat;
      }

      .statistics-numBox2 {
        display: flex;
        justify-content: center;

        align-items: center;
        position: absolute;
        top: 110px;
        left: 215px;
        flex-direction: column;

        .statistics-numBox {
          display: flex;
          justify-content: center;

          align-items: center;
          // position: relative;
          // top: -127pxpx;
          flex-direction: row;

          .statistics-numLable {
            font-family: "AlibabaPuHuiTi-2-55-Regular";
            font-size: 16px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #f6f9fe;
          }

          .statistics-num {
            font-family: "AlibabaPuHuiTi-2-105-Heavy";
            font-size: 26px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #3ae184;
            margin-left: 9px;
          }
        }
      }
    }
  }

  .leftFold {
    animation: leftMove1 0.2s linear;
    animation-fill-mode: forwards;
  }

  // .unLeftFold {
  //   animation: leftMove2 0.2s linear;
  //   animation-fill-mode: forwards;
  // }

  @keyframes leftMove1 {
    from {
      left: 0%;
    }

    to {
      left: -380px;
    }
  }

  @keyframes leftMove2 {
    from {
      left: -380px;
    }

    to {
      left: 0%;
    }
  }

  .rightFold {
    animation: rightMove1 0.2s linear;
    animation-fill-mode: forwards;
  }

  // .unRightFold {
  //   animation: rightMove2 0.2s linear;
  //   animation-fill-mode: forwards;
  // }

  @keyframes rightMove1 {
    from {
      // right: 0%;
      width: 380px;
    }

    to {
      // right: -380px;
      width: 0;
    }
  }

  @keyframes rightMove2 {
    from {
      // right: -380px;
      width: 0;
    }

    to {
      // right: 0%;
      width: 380px;
    }
  }
}</style>
